<template>
  <div>
    <tree-select
        v-model="treeSelected"
        :multiple="false"
        check-strictly
        :expand-all="true"
        :load-data="loadData"
        @on-change="handleTreeSelectChange"
        @on-toggle-expand="handleTreeSelectExpand"
        @on-check-change="handleTreeSelectCheckChange"
        @on-select-change="handleTreeSelectClick"
        :data="treeData"
      ></tree-select>
  </div>
</template>

<script>
import TreeSelect from '_c/tree-select'
import { treeData, newTreeData } from '@/mock/data/tree-select'
import { getTreeSelectData } from '@/api/data'
import dept from '@/api/sys/dept'
export default {
  name: 'tree_select_page',
  components: {
    TreeSelect
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      treeSelected: [],
      treeData: [],
    }
  },
  // watch: {
  //   value(newVal, oldVal){
  //     console.log('value--change--',oldVal+'--***'+newVal)
  //   }
  // },
  async mounted () {
    // getTreeSelectData().then(res => {
    //   const { data } = res
    //   this.treeData = data
    // })
    //this.treeData = treeData
    this.getDeptData(null, '', '001001')
  },
  
  methods: {
    async getDeptData(callback, deptCode, id){
      const res = await dept.getDeptTree(deptCode, id);
      const data = res.data
      if(data.success){
        if(callback){
          callback(data.treeList)
        } else {
          this.treeData = data.treeList
          this.treeSelected = this.value
          //['40287e816720a9b60167211f46140002']
        }
        
      }
      console.log('--res',res);
    },
    changeTreeSelectData () {
      this.treeSelected = [111, 114]
    },
    changeTreeData () {
      this.treeData = newTreeData
      // this.treeSelected = [];
    },
    handleTreeSelectChange (list) {
      // console.log('=-========', list);
    },
    handleTreeSelectExpand (item) {
      // console.log('toggle expand', item);
    },
    handleTreeSelectCheckChange (selectedArray, item) {
      // console.log(selectedArray, item);
    },
    handleTreeSelectClick (selectArray, item) {
      console.log(selectArray, item);
      //this.$emit('treeClick', item)
      this.$emit('treeClick', item)
    },
    loadData (item, callback) {
      console.log('item--',item)
      this.getDeptData(callback, item.deptCode)
      /*
      setTimeout(() => {
        let data = [
          {
            id: 111,
            title: '1-1-1'
          },
          {
            id: 112,
            title: '1-1-2'
          },
          {
            id: 113,
            title: '1-1-3'
          },
          {
            id: 114,
            title: '1-1-4'
          }
        ]
        callback(data)
      }, 1000)
      */
    }
  }
}
</script>
<style>

</style>
